<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Using Transforms</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Using Transforms</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#mygraphiccontainer {
    position: relative;
    width: 700px;
    height:200px;
}
</style>
<div class="intro">
<p>This example shows how to apply transforms to shapes.</p>
</div>
<div class="example">
<div id="mygraphiccontainer"></div>
<div>
    <button type="button" id="rotate">Rotate</button><br/>
    <button type="button" id="translate">Translate</button><br/>
</div>
<script>
    YUI().use('graphics', function (Y) 
    { 
        var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
        var myrect = mygraphic.addShape({
            type: "rect",
            stroke: {
                color:"#000",
                weight: 1
            },
            fill: {
                color: "#fde"
            },
            width:40,
            height:50
        });
            
        var myellipse = mygraphic.addShape({
            type: "ellipse",
            stroke: {
                color: "#ddd",
                weight: 2
            },
            fill: {
                color:"#f00",
                opacity: 0.5
            },
            width: 100,
            height: 30,
            x:100,
            y:50
        });
            
        var mycircle = mygraphic.addShape({
            type: "circle",
            stroke: {
                color:"#ff0",
                weight: 1
            },
            fill: {
                color:"#00f"
            },
            radius: 12,
            x: -5,
            y: -5
        });
        function rotateShapes(e)
        {
            myrect.rotate(45);
            myellipse.rotate(45);
        }

        function translateShapes(e)
        {
            mycircle.translate(50, 60);
        }
        Y.on("click", rotateShapes, "#rotate");
        Y.on("click", translateShapes, "#translate");
    });
</script>

</div>

<h2>HTML</h2>
<pre class="code prettyprint">&lt;div id=&quot;mygraphiccontainer&quot;&gt;&lt;&#x2F;div&gt;
&lt;div&gt;
    &lt;button type=&quot;button&quot; id=&quot;rotate&quot;&gt;Rotate&lt;&#x2F;button&gt;&lt;br&#x2F;&gt;
    &lt;button type=&quot;button&quot; id=&quot;translate&quot;&gt;Translate&lt;&#x2F;button&gt;&lt;br&#x2F;&gt;
&lt;&#x2F;div&gt;</pre>


<h2>CSS</h2>
<pre class="code prettyprint">#mygraphiccontainer {
    position: relative;
    width: 700px;
    height:200px;
}</pre>


<h2>Javascript</h2>

<p>Create a <code>Graphic</code> instance.</p>
<pre class="code prettyprint">var mygraphic = new Y.Graphic({render:&quot;#mygraphiccontainer&quot;});</pre>

<p>Create an ellipse, recangle and circle.</p>
<pre class="code prettyprint">var myrect = mygraphic.addShape({
    type: &quot;rect&quot;,
    stroke: {
        color:&quot;#000&quot;,
        weight: 1
    },
    fill: {
        color: &quot;#fde&quot;
    },
    width:40,
    height:50
});
    
var myellipse = mygraphic.addShape({
    type: &quot;ellipse&quot;,
    stroke: {
        color: &quot;#ddd&quot;,
        weight: 2
    },
    fill: {
        color:&quot;#f00&quot;,
        opacity: 0.5
    },
    width: 100,
    height: 30,
    x:100,
    y:50
});
    
var mycircle = mygraphic.addShape({
    type: &quot;circle&quot;,
    stroke: {
        color:&quot;#ff0&quot;,
        weight: 1
    },
    fill: {
        color:&quot;#00f&quot;
    },
    radius: 12,
    x: -5,
    y: -5
});</pre>


<p>Add a method to apply a rotation to the rectangle and ellipse.</p>

<pre class="code prettyprint">function rotateShapes(e)
{
    myrect.rotate(45);
    myellipse.rotate(45);
}</pre>


<p>Add a method to apply a translate to the circle.</p>
<pre class="code prettyprint">function translateShapes(e)
{
    mycircle.translate(50, 60);
}</pre>


<p>Add click listeners to the buttons.</p>
<pre class="code prettyprint">Y.on(&quot;click&quot;, rotateShapes, &quot;#rotate&quot;);
Y.on(&quot;click&quot;, translateShapes, &quot;#translate&quot;);</pre>


<h2>Complete Example Source</h2>
<pre class="code prettyprint">&lt;div id=&quot;mygraphiccontainer&quot;&gt;&lt;&#x2F;div&gt;
&lt;div&gt;
    &lt;button type=&quot;button&quot; id=&quot;rotate&quot;&gt;Rotate&lt;&#x2F;button&gt;&lt;br&#x2F;&gt;
    &lt;button type=&quot;button&quot; id=&quot;translate&quot;&gt;Translate&lt;&#x2F;button&gt;&lt;br&#x2F;&gt;
&lt;&#x2F;div&gt;
&lt;script&gt;
    YUI().use(&#x27;graphics&#x27;, function (Y) 
    { 
        var mygraphic = new Y.Graphic({render:&quot;#mygraphiccontainer&quot;});
        var myrect = mygraphic.addShape({
            type: &quot;rect&quot;,
            stroke: {
                color:&quot;#000&quot;,
                weight: 1
            },
            fill: {
                color: &quot;#fde&quot;
            },
            width:40,
            height:50
        });
            
        var myellipse = mygraphic.addShape({
            type: &quot;ellipse&quot;,
            stroke: {
                color: &quot;#ddd&quot;,
                weight: 2
            },
            fill: {
                color:&quot;#f00&quot;,
                opacity: 0.5
            },
            width: 100,
            height: 30,
            x:100,
            y:50
        });
            
        var mycircle = mygraphic.addShape({
            type: &quot;circle&quot;,
            stroke: {
                color:&quot;#ff0&quot;,
                weight: 1
            },
            fill: {
                color:&quot;#00f&quot;
            },
            radius: 12,
            x: -5,
            y: -5
        });
        function rotateShapes(e)
        {
            myrect.rotate(45);
            myellipse.rotate(45);
        }

        function translateShapes(e)
        {
            mycircle.translate(50, 60);
        }
        Y.on(&quot;click&quot;, rotateShapes, &quot;#rotate&quot;);
        Y.on(&quot;click&quot;, translateShapes, &quot;#translate&quot;);
    });
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Shows how to create a Graphic instance and add shapes.">
                                        <a href="graphics-simple.html">Basic Graphics Implementation</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to draw lines and polygons.">
                                        <a href="graphics-path.html">Basic Path</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create linear and radial gradient fills.">
                                        <a href="graphics-gradients.html">Create Gradient Fills</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to add drag to a shape.">
                                        <a href="graphics-drag.html">Basic drag with graphic object</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to apply transforms to shape.">
                                        <a href="graphics-transforms.html">Using Transforms</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to use a custom shape with the Graphics module.">
                                        <a href="graphics-customshape.html">Custom Shape</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows to use the graphics api to draw a realistic glass.">
                                        <a href="graphics-muddyglass.html">Transparent Glass with Shadow</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows to use the graphics api to draw a violin.">
                                        <a href="graphics-violin.html">Complex Drawing: Violin</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
